<template>
	<div class="five-finger-chess-wrap">
		<p class="top flex-center">
			<span>轮到{{ player }}了：</span
			><span style="margin-right: 20px">倒计时{{ time }}s</span>
			<v-select
				v-model="level"
				:disabled="false"
				placeHolder="请选择游戏难度"
				@change="changeLevel"
			>
				<v-option label="灰常简单" :value="0"></v-option>
				<v-option label="有点难度" :value="1"></v-option>
			</v-select>
		</p>
		<ul class="five-finger-chess">
			<li
				:class="{ choosed: curIndex === index }"
				@click="itemClick(index, item)"
				v-for="(item, index) in list"
				:key="index"
			>
				<i
					class="chess"
					:class="{ active: item.active, black: item.who === 2 }"
				></i>
			</li>
		</ul>
	</div>
</template>
<script>
import VSelect from "@/components/select/select.vue";
import VOption from "@/components/select/option.vue";
export default {
	components: {
		VSelect,
		VOption,
	},
	data() {
		return {
			list: [],
			userActiveList: [], //用户已选中列表
			robotActiveList: [], //机器人选中列表
			who: 1,
			time: 60,
			timer: null,
			curIndex: null, //当前选中索引,
			level: "灰常简单",
			player: "你",
		};
	},
	created() {
		this.init();
		this.setTimer();
	},
	methods: {
		init() {
			this.list = [];
			this.userActiveList = [];
			this.robotActiveList = [];
			this.player = "你";
			this.who = 1;
			this.curIndex = null;
			this.time = 60;
			for (let i = 0; i < 20; i++) {
				for (let j = 0; j < 20; j++) {
					const item = {
						active: false,
						who: 0,
						coordinate: [j, i],
					};
					this.list.push(item);
				}
			}
		},
		setTimer() {
			this.timer = setInterval(() => {
				this.time--;
				if (this.time <= 0) {
					this.$messageBox({
						title: "游戏结果",
						type: "info",
						message: "时间到，游戏结束，你输了！",
					});
					this.init();
					clearInterval(this.timer);
				}
			}, 1000);
		},
		itemClick(index) {
			if (this.who !== 1 || this.list[index].active) {
				return;
			}
			this.player = "你";
			this.curIndex = index;
			this.updateItemInfo(); //更新玩家和robot旗子信息
			clearInterval(this.timer);
			this.time = 60;
			if (this.judgeGameResult()) {
				return this.init();
			}
			this.robot();
			setTimeout(() => {
				this.analysis();
			}, 1000);
		},

		robot() {
			this.who = 2;
			this.player = "邓大爷";
		},

		analysis() {
			switch (this.level) {
				case "灰常简单":
					this.simpleAnalysis();
					break;
				case "有点难度":
					this.middleAnalysis();
					break;
			}
			this.setTimer();
			this.judgeGameResult();
		},
		updateItemInfo(who = 1) {
			const _index = this.curIndex;
			let _item = JSON.parse(JSON.stringify(this.list[_index]));
			_item.active = true;
			_item.who = who;
			this.who = who == 1 ? 2 : 1;
			this.player = who == 1 ? "你" : "邓大爷";
			this.$set(this.list, _index, _item);
			if (who === 1) {
				this.userActiveList.push(JSON.stringify(_item.coordinate));
			} else {
				this.robotActiveList.push(JSON.stringify(_item.coordinate));
			}
		},

		simpleAnalysis() {
			const randomNum = this.getRandomNum();
			this.curIndex = randomNum;
			this.updateItemInfo(2);
		},

		middleAnalysis() {
			// const userActiveList = this.userActiveList;
			// const robotActiveList = this.robotActiveList;
			if (this.userActiveList.length == 1) {
				const user_first_coordinate = this.list[this.curIndex].coordinate;
				const user_first_coordinate_x = user_first_coordinate[0];
				const user_first_coordinate_y = user_first_coordinate[1];
				if (
					(user_first_coordinate_y !== 0 && user_first_coordinate_x !== 0) ||
					(user_first_coordinate_y === 0 && user_first_coordinate_x !== 0)
				) {
					this.curIndex -= 1;
				}
				if (
					(user_first_coordinate_x === 0 && user_first_coordinate_y !== 0) ||
					(user_first_coordinate_x === 0 && user_first_coordinate_y === 0)
				) {
					this.curIndex += 1;
				}
			} else {
				// 先空着
				const randomNum = this.getRandomNum();
				this.curIndex = randomNum;
			}
			this.updateItemInfo(2);
		},

		changeLevel() {
			this.init();
		},

		getRandomNum() {
			const randomIndex = Math.floor(Math.random() * 400);
			if (this.list[randomIndex].active) {
				return this.getRandomNum();
			}
			return randomIndex;
		},

		judgeGameResult() {
			const curItem = this.list[this.curIndex];
			const coordinate = curItem.coordinate;
			let tips = curItem.who === 1 ? "恭喜你，你赢了！" : "哈哈哈，你输了！";
			let a = [];
			let activeList =
				curItem.who == 1 ? this.userActiveList : this.robotActiveList;
			for (let j = 0; j < 20; j++) {
				a.push([]);
			}
			for (let i = 1; i < 5; i++) {
				a[0].push(JSON.stringify([coordinate[0] + i, coordinate[1]]));
				a[1].push(JSON.stringify([coordinate[0] - i, coordinate[1]]));
				a[5].push(JSON.stringify([coordinate[0], coordinate[1] + i]));
				a[9].push(JSON.stringify([coordinate[0], coordinate[1] - i]));
				a[10].push(JSON.stringify([coordinate[0] + i, coordinate[1] - i]));
				a[14].push(JSON.stringify([coordinate[0] - i, coordinate[1] + i]));
				a[15].push(JSON.stringify([coordinate[0] + i, coordinate[1] + i]));
				a[19].push(JSON.stringify([coordinate[0] - i, coordinate[1] - i]));
				if (i === 1) {
					a[4].push(JSON.stringify([coordinate[0] + 1, coordinate[1]]));
					a[2].push(JSON.stringify([coordinate[0] - 1, coordinate[1]]));
					a[6].push(JSON.stringify([coordinate[0], coordinate[1] + 1]));
					a[8].push(JSON.stringify([coordinate[0], coordinate[1] - 1]));
					a[11].push(JSON.stringify([coordinate[0] - 1, coordinate[1] + 1]));
					a[13].push(JSON.stringify([coordinate[0] + 1, coordinate[1] - 1]));
					a[16].push(JSON.stringify([coordinate[0] - 1, coordinate[1] - 1]));
					a[18].push(JSON.stringify([coordinate[0] + 1, coordinate[1] + 1]));
				}

				if (i !== 4) {
					a[2].push(JSON.stringify([coordinate[0] + i, coordinate[1]]));
					a[4].push(JSON.stringify([coordinate[0] - i, coordinate[1]]));
					a[6].push(JSON.stringify([coordinate[0], coordinate[1] - i]));
					a[8].push(JSON.stringify([coordinate[0], coordinate[1] + i]));
					a[11].push(JSON.stringify([coordinate[0] + i, coordinate[1] - i]));
					a[13].push(JSON.stringify([coordinate[0] - i, coordinate[1] + i]));
					a[16].push(JSON.stringify([coordinate[0] + i, coordinate[1] + i]));
					a[18].push(JSON.stringify([coordinate[0] - i, coordinate[1] - i]));
				}

				if (i <= 2) {
					a[3].push(JSON.stringify([coordinate[0] - i, coordinate[1]]));
					a[3].push(JSON.stringify([coordinate[0] + i, coordinate[1]]));
					a[7].push(JSON.stringify([coordinate[0], coordinate[1] - i]));
					a[7].push(JSON.stringify([coordinate[0], coordinate[1] + i]));
					a[12].push(JSON.stringify([coordinate[0] + i, coordinate[1] - i]));
					a[12].push(JSON.stringify([coordinate[0] - i, coordinate[1] + i]));
					a[17].push(JSON.stringify([coordinate[0] + i, coordinate[1] + i]));
					a[17].push(JSON.stringify([coordinate[0] - i, coordinate[1] - i]));
				}
			}
			let some = false;
			a.forEach((element) => {
				let every = element.every((item) => {
					return activeList.includes(item);
				});
				if (every) {
					some = true;
				}
			});
			if (some) {
				this.$messageBox({
					type: curItem.who === 1 ? "success" : "info",
					title: "游戏结果",
					message: tips,
				});
				return true;
			}
			return false;
		},
	},
	beforeDestroy() {
		clearInterval(this.timer);
	},
};
</script>
<style lang="less" scoped>
.five-finger-chess-wrap {
	text-align: center;
	.top {
		margin-top: 20px;
	}
	.five-finger-chess {
		display: flex;
		flex-wrap: wrap;
		width: 600px;
		height: 600px;
		margin: 30px auto 0;
		overflow: hidden;
		cursor: pointer;
		li {
			position: relative;
			box-sizing: border-box;
			font-size: 0;
			width: 30px;
			height: 30px;
			border: 1px solid #ddd;
			&.choosed {
				border: 1px dashed red;
			}
			.chess {
				&.active {
					position: absolute;
					top: 50%;
					left: 50%;
					width: 80%;
					height: 80%;
					border-radius: 50%;
					background-color: #ff5858;
					transform: translate(-50%, -50%);
					&.black {
						background-color: #000;
					}
				}
			}
		}
	}
}
</style>
